import React, { useEffect, useState } from "react";
import { Modal, Row, Col, Table } from "antd";
import { modalPropsType, lineQuoteTypes } from "@/constants/types";
import type { ColumnsType } from 'antd/es/table';
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { calculateTableWidth } from "@/utils/util";
import { lpsLineTagPrice } from "../../services";


const ProductTagDetail = ({title, visible, onCancel, currentRow}: modalPropsType) => {
  const [dataSource, setDataSource] = useState<lineQuoteTypes []>([]);

  const columns: ColumnsType<lineQuoteTypes> = [
    {
      title: '年份',
      dataIndex: 'year',
      width: 100,
      render: (_, record) => <XlTableDictColumn type="year" value={record?.year} />
    },
    {
      title: '周次',
      dataIndex: 'week',
      width: 100
    },
    {
      title: '目的地类型',
      dataIndex: 'destType',
      width: 120,
      render: (_, record) => <XlTableDictColumn type="destType" value={record?.destType} />
    },
    {
      title: '目的地',
      dataIndex: 'destCode',
      width: 120
    },
    {
      title: '卖价CBM/元',
      dataIndex: 'cbmPrice',
      width: 120
    },
    {
      title: '卖价KGS/元',
      dataIndex: 'kgsPrice',
      width: 120
    },
    {
      title: '赔付价CBM/元',
      dataIndex: 'lowestCbmPrice',
      width: 140
    },
    {
      title: '赔付价KGS/元',
      dataIndex: 'lowestKgsPrice',
      width: 140
    },
    {
      title: '参考时效/天',
      dataIndex: 'referenceTimeliness',
      width: 120
    },
    {
      title: '赔付时效',
      dataIndex: 'failTimeliness',
      width: 120
    },
    // {
    //   title: '操作',
    //   dataIndex: 'options',
    //   fixed: 'right',
    //   width: 150
    // },
  ];


  useEffect(() => {
    if (currentRow?.id) {
      lpsLineTagPrice({id: currentRow?.id}).then(
        res => {
          setDataSource(res || []);
        }
      )
    } else {
      setDataSource([]);
    }
  }, [currentRow?.id])

  return (
    <Modal
      width="1300px"
      title={title}
      open={visible}
      onCancel={onCancel}
      footer={false}
    >
      <div className="modal-form-padding">
        <Row gutter={20}>
          <Col span={4}>
            <strong>标签名称: {currentRow?.name}</strong>
          </Col>
        </Row>
        <Row gutter={20} className="mt15">
          {
            currentRow?.conditionList?.map((v: any) => (
              <Col span={4}>
                <span>{v.conditionName}: {v.conditionDesc}</span>
              </Col>
            ))
          }
        </Row>
        <Table
          bordered
          rowKey="id"
          className="mt20"
          columns={columns}
          dataSource={dataSource}
          pagination={{
            showTotal: (total: number) => `共 ${total} 条`
          }}
          scroll={{y: 600, x: calculateTableWidth(columns)}}
        />
      </div>
    </Modal>
  );
}
export default ProductTagDetail;